<template>
  <div class="app-container">
    <el-card>
      <div v-if="order.user" class="user">
        <div class="avatar" v-if="order.user.avatar">
          <div class="demo-image__lazy">
            <el-image :src="order.user.avatar" lazy :fit="'cover'" :preview-src-list="[order.user.avatar]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
        <div class="desc">
          <p>会员ID: {{ order.user.id }}</p>
          <p>电话: {{ order.user.mobile }}</p>
          <p v-if="order.user.nickname">昵称: {{ order.user.nickname }}</p>
        </div>
        <div class="status">
          {{ order.status | statusText }}
        </div>
      </div>
    </el-card>
    <el-card>
      <h1>详情:</h1>
      <p>订单号: {{ order.sn }}</p>
      <p>总运费: ￥{{ +order.total_freight }}</p>
      <p>支付总金额: ￥{{ +order.total_pay }}</p>
      <p>使用余额支付: {{ +order.use_balance }}</p>
      <p v-if="false">使用积分支付: {{ +order.use_score }}</p>
      <p v-if="false">使用平台券支付: {{ +order.use_platform_ticket }}</p>
      <p>使用现金支付: {{ +order.use_money }}</p>
      <p>支付方式: {{ order.pay_type_name }}</p>
    </el-card>
    <el-card>
      <h1>购买商品:</h1>
      <br>
      <ul>
        <li
          v-for="(item, index) in order.item"
          :key="index"
        >
          <div class="main-image">
            <el-image :src="item.product.mainImage.thumbnail_path" lazy :fit="'cover'"
                      :preview-src-list="[item.product.mainImage.path]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <p class="title">{{ item.product.title }}</p>
          <p class="quantity">数量: {{ item.quantity }}</p>
          <p class="sku" v-if="item.selected_sku_text && item.selected_sku_text !== 'null'">
            规格: {{ JSON.parse(item.selected_sku_text).join(', ') }}
          </p>
          <!-- logistics -->
          <express :item="item" :order="order" :logistics="logistics" v-if="false && +order.status > 0" />
          <br>
        </li>
      </ul>
    </el-card>
    <el-card v-if="order.address">
      <h1>收货地址:</h1>
      <p>收件人: {{ order.address.nickname }}</p>
      <p>收件人电话: {{ order.address.mobile }}</p>
      <p>收件人地址: {{ `${order.address.city.province}
        ${order.address.city.city}
        ${order.address.city.area} ${order.address.address}` }}</p>
    </el-card>
    <el-card v-if="+order.pay_type === 99">
      <h1>收货地址:</h1>
      <p>收件人: {{ order.user.name }}</p>
      <p>收件人电话: {{ order.user.mobile }}</p>
      <p>收件人地址: {{ order.user.address }}</p>
    </el-card>
<!--    <el-card v-if="order.commission && order.commission.length > 0 && false">-->
<!--      <h1>佣金:</h1>-->
<!--&lt;!&ndash;      <br>-->
<!--      <ul>-->
<!--        <li-->
<!--          v-for="(item, index) in order.commission"-->
<!--          :key="index"-->
<!--        >-->
<!--          <p>用户ID: {{ item.user_id }}</p>-->
<!--          <p>奖金: {{ +item.balance }}</p>-->
<!--          <p>积分: {{ +item.score }}</p>-->
<!--          <p>购物券: {{ +item.ticket }}</p>-->
<!--          <p>平台券: {{ +item.platform_ticket }}</p>-->
<!--          <p>奖名: {{ item.award_name }}</p>-->
<!--          <p>状态: {{ +item.status === 1 ? '已返' : '待返' }}</p>-->
<!--          <br>-->
<!--        </li>-->
<!--      </ul>&ndash;&gt;-->
<!--      <el-table-->
<!--        v-if="order.commission"-->
<!--        :data="order.commission"-->
<!--        fit-->
<!--        style="width: 100%;"-->
<!--      >-->
<!--        <el-table-column label="用户ID">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.user_id }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="佣金">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ +row.balance }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="积分" v-if="false">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ +row.score }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="购物券" v-if="false">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ +row.ticket }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="优惠劵" v-if="false">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ +row.platform_ticket }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="奖名">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ row.award_name }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="状态">-->
<!--          <template slot-scope="{row}">-->
<!--            <span>{{ +row.status === 1 ? '已返' : '待返' }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </el-card>-->
<!--    <el-card v-if="order && order.log && false">-->
<!--      <h1>日志:</h1>-->
<!--      <p v-if="order.log.user.level0">下单人: id: {{order.log.user.id}} 手机: {{order.log.user.mobile}} (等级: {{order.log.user.level0.name}})</p>-->
<!--      <div v-if="order.log.chain">-->
<!--        <p>购买时的关系链: </p>-->
<!--        <span v-for="(item, index) in order.log.chain" :key="index">-->
<!--          => id: {{item.id}} (等级: {{item.level0.name}})-->
<!--        </span>-->
<!--      </div>-->
<!--      <el-divider></el-divider>-->
<!--      <div v-if="false">{{order.log}}</div>-->
<!--    </el-card>-->
  </div>
</template>

<script>
import api from '@/api'
import config from '@/config'
import Express from './components/Express'
export default {
  name: 'OrderView',
  components: {
    Express
  },
  filters: {
    statusText(status) {
      return config.order.statusText(+status)
    }
  },
  data() {
    return {
      order: {},
      logistics: []
    }
  },
  methods: {
    fetchData() {
      api.order.view({ id: this.$route.params.id }).then(response => {
        this.order = response.data.order
        this.logistics = response.data.logistics
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.app-container {
  font-size: 12px;

  .el-card {
    margin-bottom: 10px;
    ul {
      padding: 0;
      li {
        list-style: none;
      }
    }
  }

  /* user */
  .user {
    display: flex;
    justify-content: space-between;
    //justify-items: center;
    width: 100%;
    //margin-bottom: 10px;
    .el-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .avatar {
      //background: red;
      width: 100px;
    }
    .desc {
      flex: 1;
      //padding-left: 10px;
      //background: blue;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .status {
      width: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: red;
      font-weight: 700;
    }
  }

  /* product */
  .main-image {
    width: 100px;
    height: 100px;
  }

  h1 {
    font-size: 14px;
  }

}
</style>
